<template>
    <div class="yv-button" :style="{ background: background, color: front, border: border }">
        <slot>按钮</slot>
    </div>
</template>

<script>
export default {
    name: 'YvBtn',
    props: {
        color: {
            type: String,
            default: 'var(--yv-main-color)'
        },
        reverse: {
            type: Boolean,
            default: false,
        }
    },
    computed: {
        
        background() {
            if (this.reverse) {
                return this.reverseColor();
            }
            else {
                return this.color;
            }
        },
        front() {
            if (this.reverse) {
                return this.color

            } else {
                return 'var(--yv-flip-color)'
            }
        },
        border() {
            if (this.reverse) {
                return `0.3pt solid ${this.reverseColor(38)}`
            } else {
                return `none`
            }

        }
    },
    data() {
        return {

        }
    },
    methods: {
        reverseColor(off = 15) {
            if (this.color.includes('rgb(')) {
                return `rgba(${this.color}, ${off / 100})`;
            } else {
                return `${this.color}${off}`
            }
        },
    },
}
</script>

<style scoped></style>